<template>
	<view class="page-cont">
		<navbar title="能耗监测"></navbar>
		<scroll-view class="list" :style="{height: pageHeight}" scroll-y>
			<view class="list-item" v-for="(item,index) in dataInfo" :key="index" @tap="toCheck(item.id)">
				<text class="list-item-title">{{item.name}}</text>
				<view class="list-item-info">
					<view class="list-item-info-row">
						<view class="list-item-info-row-item">
							<text class="list-item-info-row-item-name">今日电量：</text>
							<text class="list-item-info-row-item-value">{{item.todayPW}}</text>
						</view>

						<view class="list-item-info-row-item">
							<text class="list-item-info-row-item-name">今日电费：</text>
							<text class="list-item-info-row-item-value">{{item.todayPR}}</text>
						</view>

					</view>
					<view class="list-item-info-row">
						<view class="list-item-info-row-item">
							<text class="list-item-info-row-item-name">昨日电量：</text>
							<text class="list-item-info-row-item-value">{{item.yesterdayPW}}</text>
						</view>

						<view class="list-item-info-row-item">
							<text class="list-item-info-row-item-name">昨日电费：</text>
							<text class="list-item-info-row-item-value">{{item.yesterdayPR}}</text>
						</view>

					</view>
					<view class="list-item-info-row">
						<view class="list-item-info-row-item">
							<text class="list-item-info-row-item-name">本月电量：</text>
							<text class="list-item-info-row-item-value">{{item.cuttmonthPW}}</text>
						</view>

						<view class="list-item-info-row-item">
							<text class="list-item-info-row-item-name">本月电费：</text>
							<text class="list-item-info-row-item-value">{{item.cuttmonthPR}}</text>
						</view>

					</view>
					<view class="list-item-info-row">
						<view class="list-item-info-row-item">
							<text class="list-item-info-row-item-name">上月电量：</text>
							<text class="list-item-info-row-item-value">{{item.lastmonthPW}}</text>
						</view>

						<view class="list-item-info-row-item">
							<text class="list-item-info-row-item-name">上月电费：</text>
							<text class="list-item-info-row-item-value">{{item.lastmonthPR}}</text>
						</view>

					</view>

					<!-- 					<view class="list-item-info-dividing" />

					<view class="list-item-info-row">
						<view class="list-item-info-row-item">
							<text class="list-item-info-row-item-name">本月总电量：</text>
							<text class="list-item-info-row-item-value">{{item.cuttmonthPW}}</text>
						</view>

						<view class="list-item-info-row-item">
							<text class="list-item-info-row-item-name">本月总电量：</text>
							<text class="list-item-info-row-item-value">{{item.cuttmonthPR}}</text>
						</view>

					</view>
					<view class="list-item-info-row">
						<view class="list-item-info-row-item">
							<text class="list-item-info-row-item-name">上月总电量：</text>
							<text class="list-item-info-row-item-value">{{item.lastmonthPW}}</text>
						</view>

						<view class="list-item-info-row-item">
							<text class="list-item-info-row-item-name">上月总电量：</text>
							<text class="list-item-info-row-item-value">{{item.lastmonthPR}}</text>
						</view>

					</view> -->
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { useNavbar } from "@/utils/hooks.js";
	import * as energy from "@/api/energy.ts";

	const { pageHeight } = useNavbar();
	const projectId = ref<number>()
	onLoad((query ?: AnyObject | undefined) => {
		projectId.value = Number(query?.projectId);
		getData();
	})

	const dataInfo = ref([])
	const getData = async () => {
		const dataResult = await energy.getProjectObjects({ "pmid": projectId.value })
		const pwResult = await energy.getElectricYoy({ "mid": projectId.value })

		//50电表
		dataInfo.value = dataResult.modus["50"];

		dataInfo.value.forEach(item => {
			item.todayPW = "-"
			item.yesterdayPW = "-"
			item.cuttmonthPW = "-"
			item.lastmonthPW = "-"
			//电费
			item.todayPR = "-"
			item.yesterdayPR = "-"
			item.cuttmonthPR = "-"
			item.lastmonthPR = "-"
			pwResult.today.forEach(pwItem => {
				if (item.id == pwItem.oid) {
					item.todayPW = formatDecimal(pwItem.value)
					item.todayPR = formatDecimal(pwItem.value)
				}
			})
			pwResult.yesterday.forEach(pwItem => {
				if (item.id == pwItem.oid) {
					item.yesterdayPW = formatDecimal(pwItem.value)
					item.yesterdayPR = formatDecimal(pwItem.value)
				}
			})
			pwResult.cuttmonth.forEach(pwItem => {
				if (item.id == pwItem.oid) {
					item.cuttmonthPW = formatDecimal(pwItem.value)
					item.cuttmonthPR = formatDecimal(pwItem.value)
				}
			})
			pwResult.lastmonth.forEach(pwItem => {
				if (item.id == pwItem.oid) {
					item.lastmonthPW = formatDecimal(pwItem.value)
					item.lastmonthPR = formatDecimal(pwItem.value)
				}
			})
		})
	}

	const toCheck = (oid) => {
		uni.navigateTo({ url: `/pages/energy/check?projectId=${projectId.value}&oid=${oid}` })
	}
	
	function formatDecimal(num) {
	  return num?parseFloat(num.toFixed(2)).toString():"-";
	}
</script>

<style lang="scss" scoped>
	.page-cont {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;

		.list {
			// display: flex;
			// flex-direction: column;
			height: 87vh;

			.list-item {
				margin-left: 30rpx;
				margin-right: 30rpx;
				margin-top: 25rpx;
				display: flex;
				flex-direction: column;
				background-color: #FFFFFF;
				border: 2rpx solid #FFFFFF;
				box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(135, 166, 233, 0.1);
				border-radius: 10rpx;

				.list-item-title {
					border-radius: 10rpx 10rpx 0rpx 0rpx;
					background-color: #EFF1F7;
					flex: 1;
					padding-left: 20rpx;
					padding-top: 15rpx;
					padding-bottom: 15rpx;
					color: #333333;
					font-weight: 600;
					font-size: 25rpx;
					text-align: left;
				}

				.list-item-info {
					display: flex;
					flex-direction: column;
					margin: 20rpx;
					background-color: #F7F9FF;
					border-radius: 5rpx;
					padding-left: 30rpx;
					padding-right: 30rpx;
					padding-top: 20rpx;
					padding-bottom: 20rpx;

					.list-item-info-row {
						display: flex;
						flex-direction: row;
						flex: 1;
						// justify-content: space-between;

						.list-item-info-row-item {
							display: flex;
							flex-direction: row;
							// padding-left: 30rpx;
							// padding-right: 30rpx;
							width: 50%;
							padding-top: 10rpx;
							padding-bottom: 10rpx;

							.list-item-info-row-item-name {
								color: #999999;
								font-size: 25rpx;
								font-weight: 400;
							}

							.list-item-info-row-item-value {
								color: #666666;
								font-size: 25rpx;
								font-weight: 500;
								max-width: 40%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;

							}
						}
					}

					.list-item-info-dividing {
						background-color: #dfdfdf;
						height: 1rpx;
						width: 100%;
						margin-left: 5rpx;
						margin-right: 5rpx;
						margin-top: 15rpx;
						margin-bottom: 15rpx;
					}
				}

			}
		}
	}
</style>